<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>logo</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="zdgl">
    <div class="public-top">
      <img src="./images/logo.png" class="logo" alt="">
      <a href="javascript:void(0)" class="login-out">退出登录</a>
    </div>
    <div class="public-bg">
      <div class="container">
        <a href="index.html">
          <img src="./images/index-p.png" alt="">
        </a>
        <a href="zdgl.html" class="index-pic">
          <img src="./images/zd-a.png" alt="">
        </a>
        <a href="more.html">
          <img src="./images/more.png" alt="">
        </a>
      </div>
    </div>
    <div class="cont">
      <div class="container">
        <div class="content">
          <div class="top">
            <p class="left">在线设备</p>
            <div class="right">
              <p class="text">状态：</p>
              <p class="text1">拔出</p>
              <p class="fang gray"></p>
              <p class="text1">拔出</p>
              <p class="fang green"></p>
              <p class="text1">拔出</p>
              <p class="fang red"></p>
            </div>
          </div>
          <div class="item">
            <div class="left">
              <div class="img">
                <img src="./images/phone.png" alt="">
              </div>
              <div class="mid">
                <div class="mid-top">
                  <input type="text" class="input" readonly value="X6S A" />
                  <p class="mid-img"></p>
                </div>
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
                <p class="mid-text">在线：0天3小时23分钟</p>
              </div>
              <div class="right">
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="item">
            <div class="left">
              <div class="img">
                <img src="./images/phone.png" alt="">
              </div>
              <div class="mid">
                <div class="mid-top">
                  <input type="text" class="input" readonly value="X6S A" />
                  <p class="mid-img"></p>
                </div>
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
                <p class="mid-text">在线：0天3小时23分钟</p>
              </div>
              <div class="right">
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="mid-line">
            <p class="text">离线设备</p>
          </div>
          <div class="item">
            <div class="left">
              <div class="img">
                <img src="./images/pgone1.png" alt="">
              </div>
              <div class="mid">
                <div class="mid-top">
                  <!-- <p class="text">X6S A</p> -->
                  <input type="text" class="input" readonly value="X6S A" />
                  <p class="mid-img"></p>
                  <p class="del"></p>
                </div>
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
                <p class="mid-text">在线：0天3小时23分钟</p>
              </div>
              <div class="right">
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
              </div>
            </div>
            <div class="right"></div>
          </div>
          <div class="item">
            <div class="left">
              <div class="img">
                <img src="./images/pgone1.png" alt="">
              </div>
              <div class="mid">
                <div class="mid-top">
                  <!-- <p class="text">X6S A</p> -->
                  <input type="text" class="input" readonly value="X6S A" />
                  <p class="mid-img"></p>
                  <p class="del"></p>
                </div>
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
                <p class="mid-text">在线：0天3小时23分钟</p>
              </div>
              <div class="right">
                <p class="mid-text">↑ 0 Kbps</p>
                <p class="mid-text">IP地址：192.168.3.4</p>
              </div>
            </div>
            <div class="right"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="public-bottom">
      <div class="container">
        <div class="close">
          <img src="./images/close.png" alt="">
          <p class="text">重启路由器</p>
        </div>
        <div class="text-box">
          <div class="item">
            <p class="top">应用下载</p>
            <a href="#" class="text">华为智能家居APP</a>
          </div>
          <div class="item">
            <p class="top">关于产品</p>
            <a href="#" class="text">华为商城</a>
            <a href="#" class="text">花粉论坛</a>
          </div>
          <div class="item">
            <p class="top">联系方式</p>
            <a href="#" class="text">官方微信</a>
          </div>
          <div class="item">
            <p class="top">法律申明</p>
            <a href="#" class="text">隐私声明</a>
            <a href="#" class="text">花粉论坛</a>
            <a href="#" class="text">开源软件声明</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    $(".item .left .mid .mid-img").click(function(){
      $(this).prev().addClass('active')
      $(this).prev().removeAttr('readonly')
    })
    $(document).keydown(function(event){
  　　if(event.keyCode==13){
        $(".item .left .mid .input").removeClass('active');
        $(".item .left .mid .input").attr('readonly','readonly');
    　}
    });
})
</script>
</html>